class quanBu {
    constructor() {
        this.jiedianFn();
        this.yiruFn();
    }
    jiedianFn() {
        this.smallObj = document.getElementById('small');
        this.maskObj = document.getElementById('mask');
        this.bigObj = document.getElementById('big');
        this.imgObj = document.querySelector('.boxx img');
        this.boxObj = document.querySelector('.boxx');
        this.imgObj = document.querySelector('.big img');
        //console.log(this.imgObj);
    }
    yiruFn() {
        this.smallObj.onmouseenter = this.enterFn.bind(this);
        this.smallObj.onmouseleave = this.leaveFn.bind(this);
        this.smallObj.onmousemove = this.moveFn.bind(this);
    }
    enterFn() {
        this.maskObj.style.display = 'block';
        this.bigObj.style.display = 'block';
    }
    leaveFn() {
        this.maskObj.style.display = 'none';
        this.bigObj.style.display = 'none';
    }

        
       
    moveFn(eve) {
        var mouseX  = eve.pageX;
   var mouseY = eve.pageY;
   
   // 获取box的位置
   var boxL = this.boxObj.offsetLeft;
   var boxT = this.boxObj.offsetTop;

   var maskW = this.maskObj.offsetWidth;
   var maskH = this.maskObj.offsetHeight;
   
   // 最后计算的距离就是小黄块，相对于图的
   var tmpX = mouseX-boxL-maskW/2;
   var tmpY = mouseY-boxT-maskH/2;
   // 设置目标距离
   var targetX = this.smallObj.offsetWidth-maskW ;
   var targetY = this.smallObj.offsetHeight-maskH;
   // 判断是否到达最大距离
   if(tmpX>targetX) tmpX = targetX;
   if(tmpY>targetY) tmpY = targetY;

   if(tmpX<0)tmpX=0;
   if(tmpY<0) tmpY =0;

   this.maskObj.style.left = tmpX+ 'px';
   this.maskObj.style.top = tmpY +'px';

   //黄色盒子覆盖到哪里,对应的大盒子里图片展示哪里
  //  mask移动的距离 / mask移动的最大距离 == img移动的距离 / img移动的最大距离
  //img移动的距离 = mask移动的距离 / mask移动的最大距离 * img移动的最大距离
  var bigTargetX = this.imgObj.offsetWidth-this.bigObj.offsetWidth;
  var bigTargetY =  this.imgObj.offsetHeight-this.bigObj.offsetHeight;
  var bigX = tmpX/targetX*bigTargetX;
  var bigY = tmpY/targetX*bigTargetY;

  // 设置最终大图位置
 // console.log(bigX,bigY)
 this.imgObj.style.left = -bigX+'px';
 this.imgObj.style.top = -bigY+'px';

    
    }

}
new quanBu;